<template>
   <div>
        <h1>购物车</h1>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" @click="selectAllBox" v-model="isCheckedAll">全选
                    </th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in shopcartList" :key="index" @click="shopcartEvent(index,$event)">
                    <td>
                        <input type="checkbox" :value="index" v-model="isck">
                    </td>
                    <td>{{item.pid}}</td>
                    <td>{{item.pname}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="leftBtn">-</button>
                        <input type="text" v-model="item.num" class="num">
                        <button class="rightBtn">+</button>
                    </td>
                    <td>{{item.amount}}</td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="checkbox" @click="selectAllBox" v-model="isCheckedAll">全选
                    </td>
                    <td colspan="6">
                        总价:{{totalPrice}}
                    </td>
                </tr>
            </tfoot>
        </table>
   </div>
</template>

<script>
export default {
    data(){
        return{
            shopcartList:[
                {
                    pid:'1001',
                    pname:'格力空调品圆1P',
                    price:998.50,
                    num:1,
                    amount:0
                },
                {
                    pid:'1002',
                    pname:'vivo一亿像素相机手机',
                    price:123.54,
                    num:2,
                    amount:0
                },
                {
                    pid:'1003',
                    pname:'oppo一亿像素相机手机',
                    price:1165.09,
                    num:1,
                    amount:0
                },
                {
                    pid:'1004',
                    pname:'HUAWEI一亿像素相机手机',
                    price:2165.78,
                    num:2,
                    amount:0
                }
            ],
            isCheckedAll:false,
            isck:[]

        }
    },
    methods:{
       shopcartEvent(index,e){
          let {target}=e;
          switch(target.className){
            case 'leftBtn':
                this.shopcartList[index].num--
                if(this.shopcartList[index].num<=1){
                    alert('数量不能小于1')
                    this.shopcartList[index].num=1
                }
                break;
            case 'rightBtn':
                this.shopcartList[index].num++
                break;
          }
       }, 
       selectAllBox(e){
        //复选框DOM元素都有一个checked属性，如果复选框被选中则这个值为true,如果复选框中钩取消掉，则checked的值为false
         this.isCheckedAll=e.target.checked
       }
    },
    computed:{
        totalPrice(){
            let total=0
            this.shopcartList.forEach((item,index)=>{
                if(this.isck.indexOf(index)!=-1){
                    total+=item.amount
                }
            })
            return total.toFixed(2)
        }
    },
    watch:{
        shopcartList:{
            deep:true,
            immediate:true,
            handler(newval){
              newval.forEach((item,index) => {
                 item.amount=parseFloat((item.price*item.num).toFixed(2))               
              });
            }
        },
        //如果isCheckedAll状态一旦发生变化就会watch(监听)它
        isCheckedAll(newval){
            //如果newval的值为true，表示全框的复选框被选中，那么就要求购物车商品前面的所有复选框被选中，只要当前的购物车商品信息的下标存在于isck数组中就被选中
            // if(newval){
            //     let ary=this.shopcartList.map((item,index)=>index)
            //     console.log(ary);
            //     this.isck=ary
            // }else{
            //     console.log('我被你给点了');
            //     if(this.isck.length!=this.shopcartList.length){
            //         this.isck=this.isck
            //     }else{
            //         this.isck=[]
            //     }
            // }
            this.isck=newval?this.shopcartList.map((item,index)=>index):this.isck.length!=this.shopcartList.length?this.isck:[]
        },
        //当勾选购物车列表中某一项商品信息前面的勾的时后会出触发，被监听
        isck(newval){
            console.log(newval);
            this.isCheckedAll=newval.length==this.shopcartList.length?true:false
        }
    }
}
</script>

<style>
   table{
    border-collapse: collapse;
    width: 800px;
   }
   td,th{
    border: 1px solid #000;
    text-align: center;
    padding: 10px;
   }
   .num{
        width: 30px;
        height: 25px;
        text-align: center;
   }
   .leftBtn,.rightBtn{
        width: 30px;
        height: 30px;
        margin: 5px;
        border: 0;
        background-color: skyblue;
        color: white;
   }
</style>